<template>
  <div class="header">
    <ul>
      <li>
        <router-link
          class="p1 iconfont icon-shouye"
          to="home"
          active-class="active"
        ></router-link>
        <div class="p2">首页</div>
      </li>
      <li>
        <router-link
          class="p1 iconfont icon-dingdan"
          to="order"
          active-class="active"
        ></router-link>
        <div class="p2">订单</div>
      </li>
      <li>
        <router-link
          class="p1 iconfont icon-wodejuanbao"
          to="myPage"
          active-class="active"
        ></router-link>
        <div class="p2">我的</div>
      </li>
    </ul>
  </div>
</template>




<script>
import "../assets/fonts/iconfont.css";
export default {
  name: "myFooter",
  data() {
    return {
      index: "0",
    };
  },
  methods: {
    myTab(v1) {
      this.index = v1;
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  width: 100%;
  height: 80px;
  bottom: 0;
  background-color: white;
  ul {
    display: flex;
    justify-content: space-between;
    li {
      list-style: none;
      margin-left: -41px;
      margin-right: 23px;
      a {
        -webkit-tap-highlight-color:transparent;
      }
      .p1 {
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
        margin-bottom: 5px;
      }
      .p2 {
        text-align: center;
        font-size: 12px;
      }
    }
  }
  .active {
    color: red;
  }
}
</style>